<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // 1.复习  2. 把异步获取的数据渲染到视图 ； 3.执行有关的题目； 3.方块运动 改成 async await ；

      function ajax1() {
        return new Promise((resolve) => {
          setTimeout(() => {
            var arr = [{ name: "张三" }, { name: "李四" }, { name: "王五" }];
            console.log(arr);
            resolve(arr);
          }, 1000);
        });
      }
      function ajax2(res) {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(res);
          }, 1500);
        });
      }

      (async function () {
        try {
          ajax1();
          var res = ajax1()
            .then((res) => {
              return ajax2(res);
            })
            .then((arr) => {
              var age = [{ age: 20 }, { age: 23 }, { age: 21 }];
              var ulEle = document.createElement(ulEle);
              arr.forEach((item, key) => {
                age.forEach((val, k) => {
                  if (key == k) {
                    item.age = age[k].age;
                  }
                });
                ulEle.innerHTML += `<li>${arr[key].name} ${arr[key].age}</li>`;
              });
              document.body.appendChild(ulEle);
            });
        } catch (err) {
          console.log(err);
        }
      })();
    </script>
  </body>
</html>
